<template>
    <div class="team">
    <Row>
            <Col span="22">
            <Form ref="formInline" inline>
                <FormItem>
                    <Input placeholder="请输入关键字" style="width: 300px" v-model="keyword" @on-change="onSeach"/>
                </FormItem>                              
            </Form>
            </Col>
            <Col span="2" style="text-align:right">
                <Button type="primary" icon="md-add" style="width:100px" ghost @click="showAddModel">录入</Button>
            </Col>
        </Row> 
    <Table :columns="columns" :data="datas" stripe border size="small" height="600" highlight-row ref="table" @on-row-dblclick="onRow"></Table>
    <br>
    <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
    <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤数据</Button>
    <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出所有分页数据</Button>
    <div style="float: right;">
            <Page :total="dataCount" :current="1" @on-change="changePage" @on-page-size-change="changePageSize" show-sizer :page-size-opts="[20,30,50,100]"></Page>
    </div>     
    <Modal v-model="teamInfoDialog.show" title="团队信息"  footer-hide fullscreen>
        <TeamInfo :teamInfo="teamInfo" ></TeamInfo>
    </Modal>
    <Modal v-model="addTeamDialog.show" title="录入团队基本信息"  footer-hide >   
        <AddTeam></AddTeam>         
    </Modal>
    </div>
</template>

<script>
import TeamInfo from './team/TeamInfo'
import AddTeam from './team/AddTeam'
export default {
    name: 'team',
    data () {
        return {  
            columns: [
                {
                    type: 'index',
                    width:60,
                    fixed: 'left',
                    align: 'center'
                },
                {
                    title: '出发日期',
                    key: 'start_date',
                    fixed: 'left',
                    width: 120
                },
                {
                    title: '所属',
                    width: 120,
                    key: 'category_id',
                    filters: [
                        {
                            label: 'Greater than 25',
                            value: 1
                        },
                        {
                            label: 'Less than 25',
                            value: 2
                        }
                    ],
                    filterMultiple: false,
                    filterMethod (value, row) {
                        if (value === 1) {
                            return row.age > 25;
                        } else if (value === 2) {
                            return row.age < 25;
                        }
                    }
                },
                {
                    title: '部门',
                    width: 120,
                    tooltip:true,
                    key: 'branch_id'
                },
                {
                    title: '团号',
                    width: 100,
                    key: 'sn'
                },
                {
                    title: '线路',
                    width: 150,
                    fixed: 'left',
                    key: 'title'
                },
                {
                    title: '客户',
                    width: 100,
                    key: 'client_id'
                },
                {
                    title: '客人',
                    width: 100,
                    key: 'guest'
                },
                {
                    title: '人数',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '销售收入',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '已收款',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '未收款',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '销售成本',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '已付款',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '未付款',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '毛利',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '毛利率',
                    width: 100,
                    key: 'num'
                },
                {
                    title: '业务员',
                    width: 100,
                    key: 'salesman_id'
                },
                {
                    title: '操作员',
                    width: 100,
                    key: 'operator_id'
                },
                {
                    title: '业务提成',
                    width: 100,
                    key: 'sell_commission'
                },
                {
                    title: '操作提成',
                    width: 100,
                    key: 'perator_commission'
                },
                {
                    title: '操作',
                    width: 150,
                    key: 'date',
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showTeamInfoModel(params);
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.onRemove(params)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],          
            datas: [],
            dataAll:[],
            dataCount:0,
            page:1,
            pageSize: 20,
            keyword:'',
            teamInfoDialog: {
                show: false                    
            },
            teamInfo: [], 
            addTeamDialog: {
                show: false
            }  
        }
    },
    components: {            
        TeamInfo,
        AddTeam
    },
    created: function(){
        this.getTeamList();
    },        
    methods: {
        onRow(params){
            this.teamInfoDialog.show = true;                
            this.teamInfo = params;
        },
        showAddModel(){
            this.addTeamDialog.show = true;
        },
        showTeamInfoModel(params){                
            this.teamInfoDialog.show = true;                
            this.teamInfo = params.row;       
        },
        exportData (type) {
                if (type === 1) {
                this.$refs.table.exportCsv({
                    filename: '导出原始数据'
                });
            } else if (type === 2) {
                this.$refs.table.exportCsv({
                    filename: '导出筛选或排序后数据',
                    original: false
                });
            }else if (type === 3) {
                this.$refs.table.exportCsv({
                    filename: '导出所有分页数据',                        
                    columns: this.columns,
                    data: this.dataAll
                    });
            }
        },
        getTeamList: function(){                 
            var that = this;               
            that.$axios.get('http://localhost/public/api/team?type=1&page='+  that.page +'&page_count='+ that.pageSize +'&keyword='+ that.keyword)
            .then(function (response) {  
                that.datas = response.data.datas;  
                that.dataAll = response.data.dataAll;
                that.dataCount = response.data.dataCount;  
            })
            .catch(function (error) {
                console.log(error);
            });
        },                
        changePage (n) {               
            this.page = n;               
            this.getTeamList();
        },
        changePageSize :function(n) {
            this.pageSize = n;               
            this.getTeamList();
        },
        onSeach: function(){
            this.getTeamList();
        },
        onRemove: function(params){
            var that = this;
            that.$Modal.confirm({
                title: '确定要删除吗？',                   
                onOk: () => {
                    that.$axios.get('http://localhost/public/api/team/delete?id=' + params.row.id)
                        .then(function (response) { 
                            that.$Message.info('删除成功!');                      
                            that.getTeamList();
                        })
                        .catch(function (error) {
                            this.$Message.error('删除失败!');         
                        });
                }
            });
        }
    }
    
}
</script>
